{% extends "base.html" %}
{% block ngapp %}HealthCheckEditAlertsApp{% endblock ngapp %}
{% block breadcrumb %}
    <ul id='breadcrumb-list'>
    <li><a href="{% url 'alerts' %}">Alerts</a></li>
    <li class='separator'></li>
    <li class='last'>Edit alert</li>
    </ul>
{% endblock %}
{% block content_class %}class="alert-settings"{% endblock content_class %}
{% block title %}Health Check Alerts - Edit{% endblock %}
{% block content %}

<form action="{% url 'edit_healthcheck_alert' alert_id=alert|mongo_id %}" method='post' data-ng-controller="HealthCheckAlertsCtrl" name='form'>
    <ul class='inner-heading'>
        <li><h1>Edit alert</h1></li>
    </ul>
    <ul class="settings-list-form">    
    <li>
        <span class="label">Servers</span>
        {{ form.server }}
        {{ form.server.errors }}
    </li>

    <li data-ng-show="show_tags">
        <span class="label">Tags</span>
         <select id="tags" name="tags" select2-dropdown data-placeholder="Select tags" multiple="">
        
        {% for tag in tags  %}
            <option {% if tag|mongo_id in alert.tags%}selected{% endif %} 
            value="{{ tag|mongo_id }}">{% if tag.group.name %}{{tag.group.name }}:{% endif %}{{ tag.name }}</option>
        {% endfor %}
        </select>
    </li>

    <li>
        <span class="label">Check</span>
         <select id="metric" name="metric" command-dropdown data-placeholder="Select Command"
          data-selected="{{ selected_command }}">
         <option value="">{{ selected_command }}</option>
        </select>
    </li>
    
    <li class='small-dropdown' data-ng-show="show_status">
            <span class="label">Status is</span>
            {{ form.status }}
        </li>
    <li>
        <span class="label">For</span>
        {{ form.period }}
    </li>
    </ul>

        
    </ul>
    <ul class='inner-heading'>
        <li><h1>Send notification to</h1></li>
    </ul>
    <ul class="settings-list-form">        
    <li class='alert-recepients-dropdown'>
        <span class="label">Notify</span>
        <select id='notifications-select' name='notifications' multiple="" data-placeholder="Select Recipients" notifications-dropdown>
            {% for n in notifications %}
                <option value="{{n.formated_id}}" data-image="{{STATIC_URL}}images/integrations/{{n.provider_id}}.png" 
                {% if n.formated_id in alert.notifications %}selected{% endif %}>
                {{n.provider_id}}: {% if n.provider_id == 'email' %}{{n.email}} {% else %}{{n.name}}{%  endif %}
                </option>
            {% endfor %}
        </select>
    </li>


     <li class='buttons'>
        {% csrf_token %}
        <input type="submit" class='button' value="Update" />
    </li>
    </ul>
    </form> 
    
{% endblock %}
{% block js %}
{% if request.devmode %}
<script type="text/javascript" src='{{ STATIC_URL }}js/apps/angular.healthcheck_alerts.edit.js'></script>
{% endif %}

{% endblock %}
